<script setup>
import { ref, onMounted } from 'vue'
import { Avatar, Message } from '@element-plus/icons-vue'
import avatar from '@/assets/user.png'
import useUserInfoStore from '@/stores/userinfo.js'
const data = ref({
    name: '',
    num: '202211070228',
    email: ''
})

//使用pinia
const useInfoStore = useUserInfoStore();

const start = () => {
    data.value.name = useInfoStore.info.username
    data.value.email = useInfoStore.info.email
}

onMounted(() => {
    start();
})

</script>
<template>
    <div class="card-wrapper">
        <el-card class="page-container" style="width: 40%;">
            <template #header>
                <div class="header">
                    <span>基本资料</span>
                </div>
            </template>

            <el-row justify="center" style="margin-bottom: 20px;">
                <el-avatar :src="avatar" :size="100" />
            </el-row>

            <el-row>
                <el-col :span="21">
                    <el-form label-width="100px" size="large" :module="data">
                        <el-form-item label="姓名">
                            <el-input :prefix-icon="Avatar" v-model="data.name" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="学号">
                            <el-input :prefix-icon="Avatar" v-model="data.num" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input :prefix-icon="Message" v-model="data.email" disabled></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>

</template>

<style scoped>
.card-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
}
</style>